<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 第二步: 引入两个js 文件 -->
    <!-- 01: react语法的核心库 -->
    <script src="../js/react.js"></script>
    <!-- react操作dom的核心库 -->
    <script src="../js/react-dom.js"></script>
    <!-- 引入babel.js 用来编译jsx 语法 -->
    <script src="../js/babel.js"></script>
</head>

<body>
    <!-- 第一步: 创建一个容器 id名为root -->
    <div id="root">


    </div>

</body>

</html>
<script type="text/babel">
    // 01:获取页面中的根节点
    const root_container = document.querySelector('#root');
    // 02: 创建react根实例, 相当于vue中 createApp()
    const root = ReactDOM.createRoot(root_container);
    //console.log(ReactDOM);
    // 03: 使用root根实例上的render中传递的react组件或标签
    // root.render(React.createElement('div', { id: 100, className: 'box' }, '我是div'))
    // root.render(React.createElement('div', { id: 100, className: 'box' }, React.createElement('p', {}, '我是p元素')))


    // 04: 使用babel语法 定义一个jsx 语法结构
    // 使用jsx语法: 最终通过babel 编译成 React.createElement()写法
    const el =
        <div className="box">
            <p>我是p元素</p>
        </div>
    root.render(el)





</script>